<template>
  <div>

    <div class="el-dialog-div" ref="formBox">

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" size="mini" @click="pasteGoods">粘贴商品</el-button>
        </el-col>
      </el-row>
      <el-form ref="form" :model="form" label-width="180px" :rules="rules">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name" class="input-W" placeholder="商品名称" />
        </el-form-item>
        <el-form-item label="商品编号" prop="goodsNo">
          <el-input v-model="form.goodsNo" class="input-W" placeholder="商品编号" />
        </el-form-item>
        <el-form-item label="场馆名称" prop="name">
          <el-select v-model="form.venueId" placeholder="场馆选择" clearable class="input-W">
            <el-option v-for="dict in this.venueList" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="竞标价" prop="basePrice">
          <el-input v-model="form.basePrice" class="input-W" placeholder="竞标价" />
        </el-form-item>
        <el-form-item label="投标额" prop="priceUnitBase">
          <el-input v-model="form.priceUnitBase" class="input-W" placeholder="投标价" />
        </el-form-item>
        <el-form-item label="中标价" prop="priceLimit">
          <el-input v-model="form.priceLimit" class="input-W" placeholder="中标价" />
        </el-form-item>
        <el-form-item label="成本价格(元)" prop="costPrice">
          <el-input v-model="form.costPrice" class="input-W" placeholder="请输入成本价格" />
        </el-form-item>
        <el-form-item label="零售价(元)" prop="retailPrice">
          <el-input v-model="form.retailPrice" class="input-W" placeholder="请输入零售价" />
        </el-form-item>
        <el-form-item v-if="form.typeCode == 4" label="金积分价格" prop="goldPrice">
          <el-input v-model="form.goldPrice" class="input-W" placeholder="请输入金积分价格" />
        </el-form-item>
        <el-form-item v-if="form.typeCode == 4" label="银积分价格" prop="silverPrice">
          <el-input v-model="form.silverPrice" class="input-W" placeholder="请输入银积分价格" />
        </el-form-item>

        <el-form-item label="赠送类型" prop="rebaseType">
          <el-select v-model="form.rebaseType" placeholder="赠送类型" clearable class="input-W" @change="rebaseTypeChange" disabled>
            <el-option v-for="dict in this.rebaseType" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="form.rebaseType == '3'" label="赠品" prop="rebaseGoodsId">
          <div class="flex-send">
            <el-button @click="selectSendG" style="width:120px">选择赠品</el-button>
            <span>
              {{this.form.rebaseName?'已选商品:' + this.form.rebaseName : ''}}
            </span>
          </div>
        </el-form-item>

        <el-form-item label="是否上架" prop="isPutaway">
          <el-select v-model="form.isPutaway" placeholder="上架状态" clearable class="input-W">
            <el-option v-for="dict in this.dict.type.goods_putaway_status" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="上架日期" prop="orderNum">
          <el-date-picker v-model="form.putawayDateStart" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
        </el-form-item>

        <el-form-item label="排序" prop="orderNum">
          <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
        </el-form-item>
        <!-- <el-form-item label="缩略图" prop="imgMin">
        <image-upload :valueData="form.imgMin" params="imgMin" @uploaded="uploaded"></image-upload>
      </el-form-item> -->
        <el-form-item label="大图" prop="minList">
          <image-upload :valueData="form.minList" params="minList" @uploaded="uploaded"></image-upload>
        </el-form-item>
        <el-form-item label="商品详情" prop="details">
          <editor :value="form.details" :height="400" ref="editor"></editor>
        </el-form-item>
      </el-form>
    </div>

    <div v-if="open">
      <Z-Dialog :title="title" :visible.sync="open" :width="'80%'">
        <select-send-goods @selectGoods="selectGoods"></select-send-goods>
      </Z-Dialog>
    </div>
  </div>

</template>

<script>
import { pickGoodesEnum, goodsPayTypeEnum } from '@/common/enums'
import selectSendGoods from "./selectSendGoods.vue";

export default {
  name: 'formView',
  components: { selectSendGoods },
  dicts: [
    "goods_isResell_status",
    "goods_putaway_status",
  ],
  props: {
    formData: {
      type: Object,
    },
    venueList: {
      type: Array,
    },
    secCodeList: {
      type: Array,
    },

    pasteData: {
      type: Object,
    },
    rebaseType: {
      type: Array,
    }
  },

  data() {
    const validtext = (rule, value, callback) => {
      let textValue = this.$refs.editor.currentValue;
      if (!textValue) {
        callback(new Error('请输入详情内容'))
      } else {
        callback()
      }
    };
    const imgValidtext = (rule, value, callback) => {
      let textValue = this.form.minList;
      if (textValue && textValue[1] != ']') {
        callback()
      } else {
        callback(new Error('请上传大图'))
      }
    }

    return {
      open: false,
      goodsPayTypeEnum,
      pickGoodesEnum,
      openList: [],
      form: this.formData,
      copyId: undefined,
      title: '',
      rules: {
        name: [{ required: true, message: "商品名必填", trigger: "blur" }],//商品名
        goodsNo: [{ required: true, message: "商品编号必填", trigger: "blur" }],//商品编号
        venueId: [{ required: true, message: "场馆必填", trigger: "blur" }],//场馆
        basePrice: [{ required: true, message: "竞标价必填", trigger: "blur" }],//竞标价
        priceUnitBase: [{ required: true, message: "投标额必填", trigger: "blur" }],//投标价
        priceLimit: [{ required: true, message: "中标价必填", trigger: "blur" }],//中标价
        costPrice: [{ required: true, message: "成本价必填", trigger: "blur" }],//成本价
        rebaseType: [{ required: true, message: "请选择赠送类型", trigger: "blur" }],//请选择赠送类型
        rebaseGoodsId: [{ required: false, message: "请选择赠品", trigger: "blur" }],//请选择赠品
        minList: [{ required: true, message: "大图必填", trigger: ["blur", "change"], validator: imgValidtext }],//大图
        isPutaway: [{ required: true, message: "商家状态必选", trigger: "blur" }],//是否上架
        details: [{ required: true, trigger: ["blur", "change"], validator: validtext }],
      },
    }
  },
  created() {
  },

  watch: {
    formData: function (val) {
      this.form = val;
    }
  },

  methods: {
    rebaseTypeChange(e) {
      this.form.rebaseGoodsId = null;
      this.form.rebaseName = null;
      if (e == 3) {
        this.rules.rebaseGoodsId[0].required = true;

      } else {
        this.rules.rebaseGoodsId[0].required = false;

      }
    },

    //选中赠品按钮点击
    selectSendG() {
      this.open = true;
      this.title = "选择赠品";
    },

    //组件选中商品回调
    selectGoods(e) {
      this.open = false;
      this.form.rebaseGoodsId = e.id;
      this.form.rebaseName = e.name;
    },

    //粘贴商品
    pasteGoods() {
      this.form = JSON.parse(JSON.stringify(this.pasteData));
      this.copyId = this.form.id;
      this.form.goodsNo = undefined;
      this.form.id = undefined;
      this.form.basePrice = undefined;
      this.form.priceUnitBase = undefined;
      this.form.priceLimit = undefined;
      this.form.isPutaway = String(this.form.isPutaway);
      this.form.rebaseType = String(this.form.rebaseType);

    },

    uploaded(params, dict) {
      this.form[params] = JSON.stringify(dict);
    },
  }
}
</script>

<style lang="scss" scoped>
.el-dialog-div {
  height: 70vh;
  overflow: auto;
  padding-right: 30px;
}

.input-W {
  width: 100%;
}

.flex-send {
  display: flex;
  flex-direction: column;
}
</style>
